View the current build

Closes #27
Closes #23

This PR refactors Widget state into a serializable format that can be easily saved and loaded.
This format includes per-widget settings that automatically appear in the Settings menu.

Adding a new widget

1. Import your widget into WidgetMap.tsx
2. Add a new entry to WidgetMap. It should use the following format:

   const WidgetMap = {
     mywidget: {                        // Lowercase name, this is used for serialization
       component: MyWidget,             // The widget type you imported
       size: { width: 2, height: 1 },   // The default size of the widget
       resizable: { x: true, y: true }, // (Optional) Disables resizing on one or both axes
     },
   };

Adding widget settings

1. Create a new interface in your Widget file

   export interface MyWidgetSettings {
     settingOne: boolean;
     settingTwo: string;
   }

2. Import the WidgetState type

   import { WidgetState } from "../Widget";

3. Add a settings parameter to your Widget function

   export function MyWidget({ settings }: WidgetState<MyWidgetSettings>) {
     // ...
   }

   • You can now use any setting in your interface to control your widget (e.g. settings.SettingOne)

4. Import your interface and add a default configuration in WidgetMap.tsx

   const WidgetMap = {
     mywidget: {
       // ...
       settings: {
         settingOne: true,
         settingTwo: "mysetting",
       } satisfies MyWidgetSettings, // This checks for validity at build time
     },
   };